<template>
  <div class="box">
       <h1>父子组件通信之props--王健林----{{money}}</h1>
       <!-- 如果说父组件想给子组件传递数据进行父子通信,通过自定义属性传值，这种写法叫做props -->
       <!-- 现在这种写法 car='法拉利' 给的数据是死的，并非响应式（数据变化视图跟着变化） -->
       <!-- :money也是父组件给子组件传递数据，传递数据响应式、是动态的 -->
       <MyComponent1 car="法拉利"  :money="money" :changeAppMoney="changeAppMoney"></MyComponent1>

       <MyComponent2 :msg="msg"></MyComponent2>  
  </div>
</template>

<script>
//引入子组件
//当前App.vue里面  @代表是src文件夹,相当于给src起了一个别名。 
//以后在开发大型项目的时候经常用到找src文件夹里面文件关系的。
import MyComponent1 from '@/components/MyComponent1'
import MyComponent2 from '@/components/MyComponent2'
export default {
  name: 'App',
  components: {
     MyComponent1,
     MyComponent2 
  },
  //这个是App组件的响应式数据
  data() {
    return {
       //data里面定义的是组件实例的响应式数据【数据发生变化视图跟这边】
       money:1000000,
       msg:"今天是愚人节"
    }
  },
  //这个是App组件实例的方法
  methods: {
    //App父组件的方法
     changeAppMoney(){
         //修改父组件的数据为一个亿
         this.money = '一个亿';
     }
  }
}
</script>
<style scoped>
/* 不加scoped:全局样式
   加上scoped:局部样式，只是伺候当前组件的
*/
 .box{
   width: 100%;
   height: 100%;
   background: yellowgreen;
 }
</style>



